<template>
  <div class="detail-box">
    <Header></Header>
    <van-swipe-cell>
      <van-card num="2" price="2.00" desc="描述信息" class="goods-card">
        <template #title>
          <h5>采购单详情</h5>
        </template>
        <template #desc>
          <span>创建人：{{item.createName}}</span>
          <br />
          <span>项目名称：{{item.projectName}}</span>
          <br />
          <span>材料名称：{{item.materialName}}</span>
          <br />

          <span>供应商名称：{{item.supplierName}}</span>
          <br />
        </template>
        <template #num>
          <span>材料重量：{{item.materialWeight + item.materialUnit}}</span>
          <br />
        </template>
        <template #price>
          <span>创建时间：{{ time }}</span>
        </template>
      </van-card>
      <template #right>
        <van-button square text="审批" color="#6199ff"  class="delete-button" v-show="item.state !=='作废'"/>	
        <van-button square text="编辑" color="#FA746B"  class="delete-button" v-show="item.state ==='新建'" />
      </template>
      <template #left>
        <van-button square text="删除" type="danger" class="delete-button" v-show="item.state ==='新建'"/>
      </template>
    </van-swipe-cell>
    <van-steps direction="vertical" :active="item.remark.length - 1" active-color="#38f" v-show="item.remark.remark">
      <van-step v-for="(it,index) in item.remark" :key="index">
        <h4>【{{it.userName}}】{{it.remark}}</h4>
        <p>{{it.time}}</p>
      </van-step>
      
     
    </van-steps>
  </div>
</template>

<script>
import Header from "@/components/header.vue";
import Search from "@/components/Search.vue";
import moment from "moment";
export default {
  components: { Header, Search },
  data() {
    return {
      item: null,
      time: "",
      remarkTime:''
    };
  },
  created() {
    console.log(this.$route.params);
    this.item = this.$route.params;
    this.time = moment(this.item.createTime).format("YYYY-MM-DD");
  }
};
</script>

<style lang="less" scoped>
.goods-card {
  margin: 0;
  background-color: #ffffff;
}
.van-swipe-cell {
  h5 {
    margin: 0;
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
  }
  span {
    display: block;
    margin: 2px 5px;
    font-size: 14px;
    color: #000;
  }
}
.delete-button {
  height: 100%;
  color: #ffffff;
}
</style>